import { useMemo } from "react";
import { useComponentConfigStore } from "../../store/component-config";
import { MaterialItem } from "../MaterialItem";

export function Material() {
    const { componentConfig } = useComponentConfigStore();//读取store中所有注册的组件componentConfig（组件配置）

    const components = useMemo(() => {//useMemo记住计算结果，避免不必要的计算
        return Object.values(componentConfig);
     }, [componentConfig]);

    return <div>{
        components.map((item, index) => {//遍历组件，并渲染到左侧物料区
            return <MaterialItem name={item.name} desc={item.desc} key={item.name + index} />
            // 将item.name和index组合使用（如${item.name}-${index}）可以确保即使有相同名称的组件，每个key也是唯一的。
        })
    }</div>
}
